<template>
  <div class="couponHistory">
    <div class="content">
      <div class="table1">
        <table>
          <tr>
            <td>名称</td>
            <td>优惠卷类型</td>
            <td>可使用商品</td>
            <td>使用门槛</td>
            <td>面值</td>
            <td>状态</td>
          </tr>
          <tr>
            <td>{{ dataItem?.name }}</td>
            <td>{{ judgeType(dataItem?.type) }}</td>
            <td>{{ judgeproduct(dataItem?.useType) }}</td>
            <td>{{ dataItem?.minPoint }}</td>
            <td>{{ dataItem?.amount }}</td>
            <td>
              {{
                dataItem?.startTime
                  ? validity(dataItem?.startTime, dataItem?.endTime)
                  : ""
              }}
            </td>
          </tr>
          <tr>
            <td>有效期</td>
            <td>总发行量</td>
            <td>已领取</td>
            <td>待领取</td>
            <td>已使用</td>
            <td>未使用</td>
          </tr>
          <tr>
            <td>
              {{
                dataItem?.startTime
                  ? formateTime(dataItem.startTime, dataItem.endTime)
                  : ""
              }}
            </td>
            <td>{{ dataItem?.publishCount }}</td>
            <td>{{ dataItem?.receiveCount }}</td>
            <td>
              {{
                unclaimed(
                  dataItem?.publishCount as number,
                  dataItem?.receiveCount as number
                )
              }}
            </td>
            <td>{{ dataItem?.useCount }}</td>
            <td>
              {{
                isUse(
                  dataItem?.receiveCount as number,
                  dataItem?.useCount as number
                )
              }}
            </td>
          </tr>
        </table>
      </div>
      <div>
        <div class="queryBox">
          <div class="row">
            <div class="left">
              <el-icon>
                <Search />
              </el-icon>
              <span> 筛选搜索 </span>
            </div>
            <div class="right">
              <el-button @click="resetFn">重置</el-button>
              <el-button type="primary" @click="searchHandle(params)"
                >搜索</el-button
              >
            </div>
          </div>
          <div class="row">
            <span>使用状态：</span>
            <el-select v-model="useStatus" @change="changeStatus">
              <el-option :value="0" label="未使用"></el-option>
              <el-option :value="1" label="已使用"></el-option>
              <el-option :value="2" label="已过期"></el-option>
            </el-select>
            <span class="span">订单编号：</span>
            <el-input v-model="params.orderSn" placeholder="订单编号" />
          </div>
        </div>
      </div>

      <el-table :data="list" style="width: 100%" border>
        <el-table-column align="center" prop="couponCode" label="优惠码" />
        <el-table-column
          align="center"
          prop="memberNickname"
          label="领取会员"
        />
        <el-table-column align="center" prop="getType" label="领取方式">
          <template #default="{ row }">
            {{ getType(row.getType) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="领取时间">
          <template #default="{ row }">
            {{ formateDate(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="useStatus" label="当前状态">
          <template #default="{ row }">未使用</template>
        </el-table-column>
        <el-table-column align="center" prop="useTime" label="使用时间">
          <template #default="{ row }">
            {{ formateDate(row.useTime) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单编号">
          <template #default="{ row }">N/A</template>
        </el-table-column>
      </el-table>
      <div class="page">
        <ElConfigProvider :locale="zhCn">
          <el-pagination
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageChangeHandle"
            @current-change="pageSizeChangeHandle"
          />
        </ElConfigProvider>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiCouponHistory, ApiCouponItemById } from "./api";
import { Search, Tickets } from "@element-plus/icons-vue";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { formateDate } from "@/utils/time";
import tableData from "@/hooks/tableData";
import { useRoute } from "vue-router";
import { ref } from "vue";

// 路由
const route = useRoute();

// 请求参数
const params = ref<ICouponByIdParams>({
  couponId: parseInt(route.query.id as string),
});

// 存使用状态
const useStatus = ref();

const changeStatus = () => {
  params.value.useStatus = useStatus.value;
};

const {
  list,
  total,
  pageNum,
  pageSize,
  reset,
  searchHandle,
  pageChangeHandle,
  pageSizeChangeHandle,
} = tableData(ApiCouponHistory, params.value);

// 存数据
const dataItem = ref<IAddParams>({
  publishCount: 0,
  receiveCount: 0,
});

ApiCouponItemById(parseInt(route.query.id as string)).then((res) => {
  if (res.code == 200) {
    dataItem.value = res.data;
  }
});

// 重置
const resetFn = () => {
  params.value = {};
  reset(params.value);
};

// 领取方式
const getType = (num: number) => {
  if (num == 1) {
    return "主动领取";
  } else {
    return "赠送";
  }
};

// 定义已使用
const isUse = (total: number, use: number) => {
  return total - use;
};

// 定义待领取
const unclaimed = (total: number, use: number) => {
  return total - use;
};

// 定义判断优惠卷类型的方法
const judgeType = (type: number | undefined) => {
  if (type == 0) {
    return "全场赠卷";
  } else if (type == 1) {
    return "会员赠卷";
  } else if (type == 2) {
    return "购物赠卷";
  } else {
    return "注册赠卷";
  }
};

// 定义判断可使用商品的方法
const judgeproduct = (useType: number | undefined) => {
  if (useType == 0) {
    return "全场通用";
  } else if (useType == 1) {
    return "指定分类";
  } else if (useType == 2) {
    return "指定商品";
  }
};

// 定义判断使用平台的方法
const judgeplat = (platform: number) => {
  if (platform == 0) {
    return "全平台";
  } else if (platform == 1) {
    return "移动平台";
  } else if (platform == 2) {
    return "pc平台";
  }
};

// 处理时间的方法
const formateTime = (start: string, end: string | undefined) => {
  return formateDate(start) + "至" + formateDate(end);
};

// 处理有效期
const validity = (
  start: string | undefined,
  end?: string | null | undefined
) => {
  if (new Date().getTime() > new Date(formateDate(end)).getTime()) {
    return "已过期";
  } else {
    return "有效";
  }
};
</script>

<style scoped lang="less">
.couponHistory {
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    table {
      width: 1200px;
      border: 1px solid #dcdfe6;
      border-collapse: collapse;
      tr {
        display: flex;
        &:nth-child(2n-1) {
          background-color: #f2f6fc;
        }
        &:nth-child(2n) {
          color: #abaeb4;
          td {
            padding: 20px;
          }
        }
      }
      td {
        flex: 1;
        padding: 10px;
        border: 1px solid #dcdfe6;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .queryBox {
      border-radius: 5px;
      padding: 20px;
      margin: 20px 0;
      border: 1px solid #eee;

      .row {
        display: flex;
        padding: 10px 0;

        &:first-child {
          justify-content: space-between;
          align-items: center;
        }
        .span {
          margin-left: 20px;
        }
        &:last-child {
          // width: 400px;
          display: flex;
          justify-content: start;
          align-items: center;
          .el-input {
            width: 230px;
          }
          span {
            font-size: 12px;
            width: 110px;
          }
        }
      }
    }

    .editUser {
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 4px 2px #ccc;
      border-radius: 5px;
      padding: 20px;
      margin-bottom: 20px;
      align-items: center;
    }

    .page {
      padding: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
